<!--
  @Description:页面管理
  @Author:zqy
  @Date:2023-09-01 15:26:49
  @Last Modified by:zqy
  @Last Modified time:2023-09-01 15:26:49
-->
<template>
  <div>
    <table-box
      ref="refTable"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :selected-arry.sync="tableSelected"
      :off-set="-10"
      @btnOperate="btnOperate"
    />
    <edit-form
      v-if="showEdit"
      ref="formDlg"
      :visible.sync="showEdit"
      :detail-data="detailData"
      @success="refreshTable"
    />
  </div>
</template>
<script>
import EditForm from './EditForm'
import { updatePageStatus } from '@/api/pageManagement'
export default {
  components: { EditForm },
  data() {
    return {
      showEdit: false,
      detailData: {},
      otherFilters: [],
      tableSelected: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/pageManager/page`,
        // hideSearchBar: true,
        pageSize: 20,
        sort: '',
        order: 'desc',
        setting: [
          {
            prop: 'pageName',
            label: '页面名称',
            minWidth: 130
          },
          {
            prop: 'pageUrl',
            label: '地址',
            minWidth: 130
          },

          {
            prop: 'state',
            label: '状态',
            minWidth: 130,
            formatData: ({ state }) => { return state === 1 ? '启用' : '停用' }
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: 130
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            minWidth: 130
          },
          {
            prop: 'lastUpdateTime',
            label: '最后修改时间',
            minWidth: 130
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          }, {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          }, {
            buttonName: '启用',
            optCode: 'enable',
            outerFlag: true
          }, {
            buttonName: '停用',
            optCode: 'disable',
            outerFlag: true
          }] : null
      }
    }
  },
  created() {

  },
  methods: {
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'enable':
          if (!this.singleJudge(this.tableSelected, '启用', true)) {
            return
          }
          this.handleChangeState(1)
          break
        case 'disable':
          if (!this.singleJudge(this.tableSelected, '停用', true)) {
            return
          }
          this.handleChangeState(0)
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 编辑
    handleEdit(data) {
      this.detailData = data || ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    // 启用
    handleChangeState(state) {
      if (this.tableSelected.some(v => v.state === state)) {
        this.$message.warning(`仅状态为已${state === 1 ? '停用' : '启用'}的数据才可操作${state === 1 ? '启用' : '停用'}，请检查`)
        return false
      }
      this.$confirm(`确认${state === 1 ? '启用' : '停用'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.tableSelected[0].id
        updatePageStatus({ state, id }).then(res => {
          if (res.success === 1) {
            this.$message.success('操作成功')
            this.refreshTable()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

